@(roadmap: Roadmap, measures: List[(Measure, RoadmapMeasure)], discounts: List[RoadmapDiscount], editPlanForm: Form[RoadmapPlan], allMeasures: List[Measure])

<div class="panel panel-primary">
    <div class="panel-heading">
    	<h4>
        Roadmap Plan 
        <a href="#" class="edit-plan-lnk icon-link" 
    		  data-toggle="tooltip" title="Edit Roadmap Plan">
    		  <span class="glyphicon glyphicon-edit"></span>
    	  </a>
        <a href="@routes.EnergyUsages.index(roadmap.customerId)" class="icon-link pull-right" data-toggle="tooltip" title="Energy Saving Usage Chart">
          <span class="glyphicon glyphicon-stats"></span>
        </a>
      </h4>
    </div>
    <div class="panel-body plan-details">

      <div class="bs-callout bs-callout-@roadmap.level.toLowerCase">

        <p>You are currently on the <strong>@roadmap.level</strong> level for saving energy. Reduce your annual energy consumption by 10% to go up a level. Learn how by reading the community driven Q&A or post a question if you can't find what you are looking for.</p>

      </div>

    	<fieldset>
        <legend>Measures</legend>
        @if(measures.size > 0) {
          <div class="table-responsive">
    	      <table class="table table-condensed">
    		      <thead>  
    	          <tr>  
    	            <th class="col-md-2">Status</th>  
    	            <th>Measure</th>  
    	            <th class="col-sm-2 text-right">Cost</th>  
    	            <th class="col-sm-2 text-right">Saving</th>
    	            <th class="col-sm-2 text-right">CO2 Saving</th>
    	          </tr>  
    	        </thead> 
    	        <tfoot>  
    	          <tr>  
    	            <td colspan="2">Total</td>  
    	            <td class="col-sm-2 text-right">@("£%.2f".format(measures.map(_._2.installCost).sum))</td> 
    	            <td class="col-sm-2 text-right">@("£%.2f".format(measures.map(_._2.savingCost).sum))</td> 
    	            <td class="col-sm-2 text-right">@("%.2f kWh/p.a.".format(measures.map(_._2.savingCO2).sum))</td> 
    	          </tr>  
    	        </tfoot>
              <tbody>
    						@for( (measure, rm) <- measures) { 
    							<tr>
                  		<td><span class="@if(rm.status == "Completed") {glyphicon glyphicon-ok}"></span></td>
                      <td>@measure.name</td>
                      <td class="text-right">@("£%.2f".format(rm.installCost))</td>
                      <td class="text-right">@("£%.2f".format(rm.savingCost))</td>
                      <td class="text-right">@("%.2f kWh/p.a.".format(rm.savingCO2))</td>
                  </tr>
    						} 							
    					</tbody>
            </table>
          </div> 
  			}
      </fieldset>  

      @if(discounts.size > 0) {
        <fieldset>
          <legend>Discounts</legend>
  		    <div class="table-responsive">
    	      <table class="table table-condensed">
    		      <thead>  
    	          <tr>  
    	            <th class="col-md-2">Name</th>  
    	            <th>Notes</th>  
    	            <th class="col-sm-2 text-right">Value</th>  
    	          </tr>  
    	        </thead>
    	        <tfoot>  
    	          <tr>  
    	            <td colspan="2">Total</td>  
    	            <td class="text-right">@("£%.2f".format(discounts.map(_.discount).sum))</td> 
    	          </tr>  
    	        </tfoot>
              <tbody>
    						@for( discount <- discounts) { 
    							<tr>
                      <td>@discount.name</td>
                      <td>@discount.note</td>
                      <td class="text-right">@("£%.2f".format(discount.discount))</td>
                  </tr>
    						} 							
    					</tbody>
            </table>
          </div>  
        </fieldset>  
      }

      <fieldset>
        <legend>Summary</legend>
  			<table class="table table-condensed">
  	      <tfoot>
            <tr>  
              <td style="border-top: 0px;">Total Annual Cost</td>  
              <td style="border-top: 0px;" class="col-sm-2 text-right">
              	@if(measures.size > 0 && discounts.size > 0) {
              		@("£%.2f".format((measures.map(_._2.installCost).sum) - discounts.map(_.discount).sum))
              	} else {
              		@if(measures.size > 0) {
              			@("£%.2f".format(measures.map(_._2.installCost).sum))
              		}
              	}
              </td> 
            </tr>  
          </tfoot>
        </table>
      </fieldset>  
    </div>

    @editPlan(roadmap, measures, discounts, editPlanForm, allMeasures)

</div>

<script type="text/javascript" charset="utf-8">
	$(function() {
  	$('.edit-plan').hide();	

 		$('a.edit-plan-lnk').click(function() {
		  	$('.plan-details').hide();
		    $('.edit-plan-lnk').hide();
        $('#tipsPnl').hide();
        $('#socialMediaPnl').hide();
        
		    $('.edit-plan').show();
		});

		$('button.edit-btn').click(function() {
        $('.plan-details').show();
		    $('.edit-plan-lnk').show();
        $('#tipsPnl').show();
        $('#socialMediaPnl').show();

		    $('.edit-plan').hide();
		});

	});

</script> 

